<template>
	<view class="nearby-stations-page">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="nav-left" @click="goBack">
				<uni-icons type="left" size="20" color="#333" />
			</view>
			<view class="nav-center">
				<text class="nav-title">附近站点</text>
			</view>
			<view class="nav-right">
				<view class="nav-icon" @click="showMore">
					<uni-icons type="more-filled" size="20" color="#333" />
				</view>
				<view class="nav-icon" @click="refreshLocation">
					<uni-icons type="location-filled" size="20" color="#333" />
				</view>
			</view>
		</view>

		<!-- 介绍文本 -->
		<view class="intro-text">
			<text>已为您展示附近50公里的可用站点</text>
		</view>

		<!-- 充电站列表 -->
		<scroll-view scroll-y="true" class="station-list" @scrolltolower="loadMore">
			<view class="station-item" v-for="(station, index) in stationList" :key="index" @click="goToStation(station)">
				<view class="station-info">
					<view class="station-jam" v-if="station.shopName">
						<text class="station-jam-text">利行驿站</text>
					</view>
					<view class="station-header">
						<text class="station-name">{{ station.name }}</text>
						<view class="station-distance" @click.stop="goToMap">
							<uni-icons type="paperplane-filled" size="16" color="#999" />
							<text class="distance-text">{{ station.distance }}</text>
						</view>
					</view>
					<view class="station-details">
						<text class="station-facilities">{{ station.facilities }}</text>
					</view>
					<view class="station-pricing">
						<text class="price-label">¥</text>
						<text class="price-amount">{{ station.price }}</text>
						<text class="price-unit">元/度 起</text>
						<view class="station-status">
							<view class="station-rating-rateIcon">
								<text class="station-rating-rate">快</text>
							</view>
							<view class="station-rating-text-numBg">
								<text class="station-rating-text-num">闲{{ station.fastRate }}</text>
							</view>
						</view>
					</view>
					<view class="member-price-badge">
						<view class="member-price-label">会员价</view>
						<view class="member-price-value">0.85元/度</view>
					</view>
					<view class="station-rating">
						<view class="station-rating-icon">
							<text class="station-rating-p">P</text>
						</view>
						<view class="station-rating-text-bg">
							<text class="station-rating-text">{{ station.parkFee }}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
import { getChargeStationList } from '@/api/charging/index.js'
import locationManager from '@/utils/location.js'

export default {
	components: {
		uniIcons
	},
	data() {
		return {
			stationList: [
				{
					id: 1,
					name: '浦江智慧广场',
					distance: '0.8km',
					facilities: '地上｜卫生间｜快餐｜便利店',
					price: '1.05',
					status: 'available',
					availableCount: 3,
					totalCount: 4,
					shopName: '利行驿站',
					fastRate: '3/4',
					parkFee: '停车减免2小时'
				},
				{
					id: 2,
					name: '浦江智慧广场',
					distance: '0.8km', 
					facilities: '地上｜卫生间｜快餐｜便利店',
					price: '1.05',
					status: 'available',
					availableCount: 3,
					totalCount: 4,
					shopName: '利行驿站',
					fastRate: '3/4',
					parkFee: '停车减免2小时'
				},
				{
					id: 3,
					name: '浦江智慧广场',
					distance: '0.8km',
					facilities: '地上｜卫生间｜快餐｜便利店', 
					price: '1.05',
					status: 'available',
					availableCount: 3,
					totalCount: 4,
					shopName: '利行驿站',
					fastRate: '3/4',
					parkFee: '停车减免2小时'
				},
				{
					id: 4,
					name: '浦江智慧广场',
					distance: '0.8km',
					facilities: '地上｜卫生间｜快餐｜便利店', 
					price: '1.05',
					status: 'available',
					availableCount: 3,
					totalCount: 4,
					shopName: '利行驿站',
					fastRate: '3/4',
					parkFee: '停车减免2小时'
				},
				{
					id: 5,
					name: '浦江智慧广场',
					distance: '0.8km',
					facilities: '地上｜卫生间｜快餐｜便利店', 
					price: '1.05',
					status: 'available',
					availableCount: 3,
					totalCount: 4,
					shopName: '利行驿站',
					fastRate: '3/4',
					parkFee: '停车减免2小时'
				}
			]
		}
	},
	onLoad() {
		console.log('附近站点页面加载完成');
		this.loadChargeStationList();
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack();
		},
		
		// 显示更多选项
		showMore() {
			uni.showToast({
				title: '更多功能开发中',
				icon: 'none'
			});
		},
		
		// 刷新位置
		refreshLocation() {
			uni.showToast({
				title: '正在刷新位置',
				icon: 'loading'
			});
			this.loadChargeStationList();
		},
		
		// 加载充电站列表
		loadChargeStationList() {
			// 获取当前位置
			const currentLocation = locationManager.getCurrentLocation();
			console.log('当前位置信息:', currentLocation);
			
			// 检查位置是否过期
			if (locationManager.isLocationExpired(currentLocation)) {
				console.log('位置信息已过期，重新获取');
				locationManager.updateLocation((err, newLocation) => {
					if (!err) {
						this.callChargeStationAPI(newLocation);
					} else {
						// 使用过期位置或默认位置
						this.callChargeStationAPI(currentLocation);
					}
				});
			} else {
				// 使用当前位置
				this.callChargeStationAPI(currentLocation);
			}
		},
		
		// 调用充电站API
		callChargeStationAPI(location) {
			const params = {
				latitude: location.latitude.toString(),
				longitude: location.longitude.toString(),
				rows: '10',
				page: '1',
				sortType: '1'
			};
			
			console.log('调用充电站列表接口，参数:', params);
			
			getChargeStationList(params).then(res => {
				console.log('充电站列表接口返回:', res);
				if (res.code === 0 && res.success) {
					// 将接口数据转换为页面需要的格式
					const records = res.data.records || [];
					this.stationList = records.map(item => ({
						id: item.stationId,
						name: item.stationName,
						distance: item.dist + 'km',
						facilities: item.facilities,
						price: item.fee,
						status: 'available',
						availableCount: item.fastRate ? parseInt(item.fastRate.split('/')[0]) : 0,
						totalCount: item.fastRate ? parseInt(item.fastRate.split('/')[1]) : 0,
						// 新增字段
						shopName: item.shopName,
						fastRate: item.fastRate,
						parkFee: item.parkFee
					}));
					console.log('充电站列表更新成功，数据:', this.stationList);
				} else {
					console.error('充电站列表接口返回错误:', res.msg);
					uni.showToast({
						title: res.msg || '获取充电站列表失败',
						icon: 'none'
					});
				}
			}).catch(err => {
				console.error('充电站列表接口错误:', err);
				uni.showToast({
					title: '网络请求失败',
					icon: 'none'
				});
			});
		},
		
		// 跳转到充电站详情
		goToStation(station) {
			console.log('跳转到充电站详情，数据:', station);
			// 将 station 数据编码后传递到下一个页面
			const stationData = encodeURIComponent(JSON.stringify(station));
			uni.navigateTo({
				url: '/pages/station-detail/index?stationData=' + stationData
			});
		},
		
		// 跳转到地图页面
		goToMap() {
			uni.navigateTo({
				url: '/pages/map/map'
			});
		},
		
		// 加载更多
		loadMore() {
			console.log('加载更多充电站数据');
		}
	}
}
</script>

<style scoped>
.nearby-stations-page {
	min-height: 100vh;
	background: #fff;
}

/* 自定义导航栏 */
.custom-navbar {
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	background: #fff;
	border-bottom: 1rpx solid #f0f0f0;
}

.nav-left {
	width: 60rpx;
	display: flex;
	align-items: center;
}

.nav-center {
	flex: 1;
	display: flex;
	justify-content: center;
}

.nav-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.nav-right {
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.nav-icon {
	width: 40rpx;
	height: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 介绍文本 */
.intro-text {
	padding: 20rpx 30rpx;
	background: #fff;
}

.intro-text text {
	font-size: 26rpx;
	color: #999;
}

/* 充电站列表 */
.station-list {
	background: #f5f5f5;
	padding: 20rpx 0;
	padding-bottom: 120rpx;
}

.station-item {
	width: 85%;
	margin: 0 auto 20rpx auto;
	background: #fff;
	border-radius: 18rpx;
	box-shadow: 0 4rpx 16rpx rgba(255, 153, 0, 0.08);
	padding: 30rpx;
	display: flex;
	position: relative;
}

.station-info {
	flex: 1;
}

.station-jam {
	background: linear-gradient(180deg, #b97a56 0%, #eac9b0 100%);
	border-bottom-right-radius: 16rpx;
	padding: 0 24rpx;
	height: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: -5rpx;
	left: -5rpx;
}

.station-jam-text {
	color: #fff;
	font-size: 22rpx;
	font-weight: bold;
}

.station-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 15rpx;
}

.station-name {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.station-distance {
	display: flex;
	align-items: center;
	border: 1rpx solid #e5e5e5;
	border-radius: 24rpx;
	padding: 4rpx 8rpx;
}

.distance-text {
	font-size: 24rpx;
	color: #666;
	margin-left: 5rpx;
}

.station-details {
	margin-bottom: 15rpx;
}

.station-facilities {
	font-size: 24rpx;
	color: #666;
}

.station-pricing {
	display: flex;
	align-items: baseline;
}

.price-label {
	font-size: 24rpx;
	color: #ff6b35;
}

.price-amount {
	font-size: 36rpx;
	font-weight: bold;
	color: #ff6b35;
}

.price-unit {
	font-size: 24rpx;
	color: #ff6b35;
	margin-right: 20rpx;
}

.station-status {
	display: flex;
	align-items: center;
	margin-left: auto;
}

.station-rating-rateIcon {
	width: 36rpx;
	height: 36rpx;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(90deg, #ff6b35 0%, #ffb59a 100%);
	margin-right: 0;
}

.station-rating-rate {
	color: #fff;
	font-size: 20rpx;
	font-weight: bold;
}

.station-rating-text-numBg {
	background: #fff7f5;
	border-radius: 0 8rpx 8rpx 0;
	padding: 0 12rpx;
	height: 36rpx;
	display: flex;
	align-items: center;
}

.station-rating-text-num {
	color: #ff6b35;
	font-size: 20rpx;
	font-weight: bold;
}

.member-price-badge {
	display: inline-flex;
	align-items: center;
	height: 36rpx;
	border-radius: 8rpx;
	overflow: hidden;
	margin-bottom: 10rpx;
}

.member-price-label {
	background: #ff6b35;
	color: #fff;
	font-size: 18rpx;
	font-weight: bold;
	padding: 0 12rpx;
	height: 36rpx;
	display: flex;
	align-items: center;
	border-radius: 8rpx 0 0 8rpx;
	box-sizing: border-box;
}

.member-price-value {
	position: relative;
	background: #fff;
	color: #ff6b35;
	font-size: 18rpx;
	font-weight: bold;
	padding: 0 16rpx;
	height: 36rpx;
	display: flex;
	align-items: center;
	border-radius: 0 8rpx 8rpx 0;
	border: 2rpx solid #ff6b35;
	border-left: none;
	box-sizing: border-box;
}

.member-price-value::before {
	content: '';
	position: absolute;
	left: -12rpx;
	top: 0;
	width: 24rpx;
	height: 36rpx;
	background: #fff;
	border-radius: 18rpx 0 0 18rpx;
	z-index: 1;
}

.station-rating {
	display: flex;
	align-items: center;
	background: none;
	padding: 0;
}

.station-rating-icon {
	width: 36rpx;
	height: 36rpx;
	border-radius: 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(90deg, #bfc3c9 0%, #e6e8eb 100%);
	margin-right: 0;
}

.station-rating-p {
	color: #fff;
	font-weight: bold;
	font-size: 24rpx;
}

.station-rating-text-bg {
	background: #f5f6f7;
	border-radius: 0 8rpx 8rpx 0;
	padding: 0 12rpx;
	height: 36rpx;
	display: flex;
	align-items: center;
}

.station-rating-text {
	color: #888;
	font-size: 22rpx;
}
</style> 